import React, { Component } from 'react';
import {
  Form,
  Input,
  Select,
  Button,
  Rate,
  Modal,
  message,
  Drawer,
  Divider,
  Row,
  Table,
  Card,
} from 'antd';
import { connect } from 'dva';
import get from 'lodash/get';

import StandardTable from '@/components/StandardTable';
import ScrollSelect from '@/components/ScrollSelect';
import RectSvg from '@/components/Tree';
import { ServiceForm } from './ServiceForm';

import api from '@/api';
import { trim } from '@/utils/utils';
import { maxLength } from '@/utils/form';
import { SERVICE_STATUS } from '@/Constants';
import { NAME_RULE } from '@/Constants/rules';
import IconButton from '@/components/IconButton';

import styles from './BaseView.less';

export const FormItem = Form.Item;
const { Option } = Select;

@Form.create()
class NodeForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedValueServices: [],
      valueServices: [],
    };
  }
  handleOnInput = e => {
    window.compositionend && (e.target.value = trim(e.target.value));
  };
  componentDidMount() {
    this.queryValuedServices();
  }

  queryValuedServices = () => {
    api.service.queryValued().then(({ errorCode, data }) => {
      if (errorCode === 0) {
        this.setState({
          valueServices: data,
        });
      }
    });
  };

  render() {
    const { form, serviceTypes, currentNode, currentProduct, entry } = this.props;
    const { selectedValueServices, valueServices } = this.state;
    let editStatus =
      currentProduct.status === SERVICE_STATUS.DRAFT ||
      (!currentProduct.isOnline &&
        currentProduct.status === SERVICE_STATUS.AUDITTED &&
        entry === 'audit');
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 17 },
      },
    };
    return (
      <div>
        <FormItem {...formItemLayout} label="节&#8194;点&#8194;名">
          {form.getFieldDecorator('alias', {
            initialValue: currentNode.data.alias,
            rules: [
              { required: true, message: '请输入服务节点名' },
              {
                pattern: NAME_RULE.PATTERN,
                message: NAME_RULE.MESSAGE,
              },
            ],
          })(
            <Input
              onInput={this.handleOnInput}
              maxLength={4}
              disabled={!editStatus}
              ref={input => input && input.focus()}
            />
          )}
        </FormItem>
        <FormItem {...formItemLayout} label="服务类型">
          {form.getFieldDecorator('serviceTypeCode', {
            rules: [{ required: true, message: '请选择服务类型', whitespace: true }],
            initialValue: currentNode.data.serviceTypeCode,
          })(
            <Select optionFilterProp="children" style={{ width: '100%' }} disabled={!editStatus}>
              {serviceTypes.map(val => (
                <Option key={val.code} value={val.code}>
                  {val.name}
                </Option>
              ))}
            </Select>
          )}
        </FormItem>
        <FormItem {...formItemLayout} label="增值服务">
          {form.getFieldDecorator('valueAddedServiceCodeList', {
            initialValue: currentNode.data.valueAddedServiceCodeList,
          })(
            <Select
              style={{ width: '100%' }}
              disabled={!editStatus}
              onChange={values => this.setState({ selectedValueServices: values })}
              mode="multiple"
            >
              {valueServices.length > 0 &&
                valueServices.map(service => (
                  <Option key={service.code} value={service.code}>
                    {service.name}
                  </Option>
                ))}
            </Select>
          )}
        </FormItem>
        <FormItem {...formItemLayout} label="价格权重">
          {form.getFieldDecorator('priceWeighting', {
            rules: [{ required: true, message: '请选择价格权重' }],
            initialValue: currentNode.data.priceWeighting || 1,
          })(<Rate disabled={!editStatus} />)}
        </FormItem>
        <FormItem {...formItemLayout} label="时效权重">
          {form.getFieldDecorator('timeWeighting', {
            rules: [{ required: true, message: '请选择时效权重' }],
            initialValue: currentNode.data.timeWeighting || 1,
          })(<Rate disabled={!editStatus} />)}
        </FormItem>
      </div>
    );
  }
}

@Form.create()
class GroupForm extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { form, currentGroup, currentProduct, entry } = this.props;
    let editStatus =
      currentProduct.status === SERVICE_STATUS.DRAFT ||
      (!currentProduct.isOnline &&
        currentProduct.status === SERVICE_STATUS.AUDITTED &&
        entry === 'audit');
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 17 },
      },
    };
    return (
      <div>
        <FormItem {...formItemLayout} label="环&#8194;节&#8194;名">
          {form.getFieldDecorator('phaseName', {
            initialValue: currentGroup.phaseName,
            rules: [
              { required: true, message: '请输入服务环节名' },
              {
                pattern: NAME_RULE.PATTERN,
                message: NAME_RULE.MESSAGE,
              },
            ],
          })(
            <Input
              onInput={e => maxLength(e, 30)}
              disabled={!editStatus}
              ref={input => input && input.focus()}
            />
          )}
        </FormItem>
        <FormItem {...formItemLayout} label="属&#12288;&#12288;性">
          {form.getFieldDecorator('phaseType', {
            rules: [{ required: true, message: '请选择属性', whitespace: true }],
            initialValue: currentGroup.phaseType,
          })(
            <Select optionFilterProp="children" style={{ width: '100%' }} disabled={!editStatus}>
              <Option value="MAIN">主服务</Option>
              <Option value="REQUIRED">必选服务</Option>
              <Option value="OPTIONAL">可选服务</Option>
            </Select>
          )}
        </FormItem>
      </div>
    );
  }
}

@connect(({ base, product, loading }) => ({
  ratings: base.ratings,
  serviceTypes: base.serviceTypes,
  cargoTypes: base.cargoTypes,
  currentProduct: product.currentProduct,
  routes: product.routes,
  servicePhaseCreateLoading: loading.effects['product/addRoutesGroup'],
  servicePhaseUpdateLoading: loading.effects['product/updateRoutesGroup'],
  serviceNodeCreateLoading: loading.effects['product/addRoute'],
  serviceNodeUpdateLoading: loading.effects['product/updateRoute'],
  serviceCreateLoading: loading.effects['product/addService'],
  serviceUpdateLoading: loading.effects['product/updateService'],
  routeGroup: product.routeGroup,
}))
class ServiceView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      width: 0,
      height: 250,
      currentNode: { data: {} },
      currentGroup: {},
      groupVisible: false,
      drawVisible: false,
      nodeVisible: false,
      serviceVisible: false,
      drawGroupVisible: false,
      columns: [
        {
          title: '服务名',
          dataIndex: 'serviceName',
        },
        {
          title: '服务范围',
          render: (text, record, index) => {
            let noneReigon =
              record.regionItemsOfStart.length == 0 && record.regionItemsOfEnd.length == 0;
            return (
              <>
                {record.regionItemsOfStart.map(item => (
                  <p style={{ margin: 0 }} key={item.id}>
                    {item.name}
                  </p>
                ))}
                {!noneReigon && (
                  <>
                    <Divider />
                    {record.regionItemsOfEnd.map(item => (
                      <p style={{ margin: 0 }} key={item.id}>
                        {item.name}
                      </p>
                    ))}
                  </>
                )}
              </>
            );
          },
        },
        {
          title: '货物类型',
          render: (text, record, index) => {
            return <span>{record.cargoTypeNameList.toString()}</span>;
          },
        },
        {
          title: '重量限制(kg)',
          render: (text, record, index) => {
            let content = record.weightLimitMin
              ? `${record.weightLimitMin}-${record.weightLimitMax}`
              : '';
            return <span>{content}</span>;
          },
        },
        {
          title: '客户等级',
          dataIndex: 'customerLevel',
          render: (text, record, index) => {
            let ext = '';
            if (record.customerLevelExt === 'MORE') {
              ext = '及以上';
            } else if (record.customerLevelExt === 'LESS') {
              ext = '及以下';
            }
            let startMap = {
              1: '一星',
              2: '二星',
              3: '三星',
              4: '四星',
              5: '五星',
            };
            return <span>{text ? startMap[text] + ext : ''}</span>;
          },
        },
        {
          title: '申报价值(CNY)',
          render: (text, record, index) => {
            let content = record.declaredValueMin
              ? `${record.declaredValueMin}-${record.declaredValueMax}`
              : '';
            return <span>{content}</span>;
          },
        },
        {
          title: '单量',
          render: (text, record, index) => {
            return (
              <span>
                {record.orderQuantity ? `${record.orderQuantity * 100}%` : ''}
                {record.orderQuantityUnit}
              </span>
            );
          },
        },
      ],
      addRouteGroup: {
        phaseType: '',
        phaseId: '',
      },
    };
    this.groupForm = React.createRef();
    this.nodeForm1 = React.createRef();
    this.nodeForm2 = React.createRef();
    this.serviceForm1 = React.createRef();
    this.serviceForm2 = React.createRef();
  }

  componentDidMount() {
    const { dispatch, location } = this.props;
    dispatch({ type: 'base/fetchServiceTypes' });
    dispatch({ type: 'base/fetchCargoTypes' });
    dispatch({ type: 'base/fetchRating' });
    let nodeCon = document.querySelector('#nodeCon');
    this.setState({
      width: nodeCon.clientWidth,
    });
    this.searchRoutesGroup();
  }

  // 查询服务环节
  searchRoutesGroup = () => {
    const { dispatch, location } = this.props;
    dispatch({
      type: 'product/fetchRoutesGroup',
      payload: {
        queryParams: {
          productId: location.query.productId,
        },
      },
    });
  };

  // 添加服务环节
  handleAddGroup = () => {
    const { dispatch, location, form } = this.props;
    this.groupForm.current.validateFields((err, fieldsValue) => {
      if (err) return;
      dispatch({
        type: 'product/addRoutesGroup',
        payload: {
          data: {
            ...fieldsValue,
            productId: location.query.productId,
          },
        },
      }).then(res => {
        if (res.errorCode === 0) {
          message.success('添加成功');
          this.toggleGroup();
          this.searchRoutesGroup();
        }
      });
    });
  };

  // 增加服务节点
  handleAddNode = () => {
    const { dispatch, location, form } = this.props;
    const { addRouteGroup } = this.state;
    this.nodeForm2.current.validateFields((err, fieldsValue) => {
      if (err) return;
      dispatch({
        type: 'product/addRoute',
        payload: {
          data: {
            ...fieldsValue,
            productId: location.query.productId,
            phaseId: addRouteGroup.phaseId,
            phaseType: addRouteGroup.phaseType,
            nodeType: addRouteGroup.phaseType,
          },
        },
      }).then(({ errorCode }) => {
        if (errorCode === 0) {
          message.success('添加成功');
          this.toggleNode();
          this.searchRoutesGroup();
        }
      });
    });
  };

  // 更新服务节点
  handleUpdateNode = fieldsValue => {
    const { dispatch, location } = this.props;
    const { currentNode } = this.state;
    this.nodeForm1.current.validateFields((err, fieldsValue) => {
      if (err) return;
      dispatch({
        type: 'product/updateRoute',
        payload: {
          pathParams: {
            id: currentNode.data.id,
          },
          data: {
            productId: currentNode.data.productId,
            ...fieldsValue,
          },
        },
      }).then(({ errorCode }) => {
        if (errorCode === 0) {
          message.success('更新成功');
          this.toggleDraw();
          this.searchRoutesGroup();
          this.nodeForm1.current.resetFields();
        }
      });
    });
  };

  // 删除服务节点
  handleDeleteNode = () => {
    const { dispatch, location } = this.props;
    const { currentNode } = this.state;
    Modal.confirm({
      title: '删除服务节点',
      content: '确定要删除此服务节点吗？',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        return dispatch({
          type: 'product/deleteRoute',
          payload: {
            pathParams: {
              id: currentNode.data.id,
            },
          },
        }).then(({ errorCode }) => {
          if (errorCode === 0) {
            message.success('删除成功');
            this.searchRoutesGroup();
            this.toggleDraw();
          }
        });
      },
    });
  };

  // 更新服务环节
  handleUpdateGroup = fieldsValue => {
    const { dispatch, location } = this.props;
    const { currentGroup } = this.state;
    this.groupForm.current.validateFields((err, fieldsValue) => {
      if (err) return;
      dispatch({
        type: 'product/updateRoutesGroup',
        payload: {
          pathParams: {
            id: currentGroup.id,
          },
          data: {
            productId: currentGroup.productId,
            ...fieldsValue,
          },
        },
      }).then(({ errorCode }) => {
        if (errorCode === 0) {
          message.success('更新成功');
          this.searchRoutesGroup();
          this.toggleGroupDraw();
          this.groupForm.current.resetFields();
        }
      });
    });
  };

  // 删除服务环节
  handleDeleteGroup = () => {
    const { dispatch, location } = this.props;
    const { currentGroup } = this.state;
    Modal.confirm({
      title: '删除服务环节',
      content: '确定要删除此服务环节吗？',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        return dispatch({
          type: 'product/deleteRoutesGroup',
          payload: {
            pathParams: {
              id: currentGroup.id,
            },
          },
        }).then(({ errorCode }) => {
          if (errorCode === 0) {
            message.success('删除成功');
            this.searchRoutesGroup();
            this.toggleGroupDraw();
          }
        });
      },
    });
  };

  handleAddService = () => {
    const { dispatch, location, form } = this.props;
    const { currentNode } = this.state;
    this.serviceForm2.current.validateFields((err, fieldsValue) => {
      if (err) return;
      let payload = {
        ...fieldsValue,
      };
      if (fieldsValue.declaredValue) {
        payload.declaredValueMin = fieldsValue.declaredValue.start;
        payload.declaredValueMax = fieldsValue.declaredValue.end;
      }
      if (fieldsValue.weightLimit) {
        payload.weightLimitMin = fieldsValue.weightLimit.start;
        payload.weightLimitMax = fieldsValue.weightLimit.end;
      }
      if (fieldsValue.serviceId) {
        payload.serviceId = fieldsValue.serviceId.key;
      }
      delete payload.declaredValue;
      delete payload.weightLimit;
      dispatch({
        type: 'product/addService',
        payload: {
          pathParams: {
            nodeId: currentNode.data.id,
          },
          data: payload,
        },
      }).then(({ errorCode }) => {
        if (errorCode === 0) {
          message.success('添加成功');
          this.toggleService();
          this.toggleDraw();
          this.searchRoutesGroup();
        }
      });
    });
  };

  handleUpdateService = fieldsValue => {
    const { dispatch, location } = this.props;
    const { currentNode } = this.state;
    this.serviceForm1.current.validateFields((err, fieldsValue) => {
      if (err) return;
      let payload = {
        ...fieldsValue,
      };
      if (!fieldsValue.customerLevel) {
        payload.customerLevel = 0;
      }
      if (!fieldsValue.customerLevelExt) {
        payload.customerLevelExt = '';
      }
      if (!fieldsValue.orderQuantity) {
        payload.orderQuantity = 0;
      }
      if (fieldsValue.declaredValue) {
        payload.declaredValueMin = fieldsValue.declaredValue.start || 0;
        payload.declaredValueMax = fieldsValue.declaredValue.end || 0;
      }
      if (fieldsValue.weightLimit) {
        payload.weightLimitMin = fieldsValue.weightLimit.start || 0;
        payload.weightLimitMax = fieldsValue.weightLimit.end || 0;
      }
      delete payload.declaredValue;
      delete payload.weightLimit;
      let serviceId;
      if (fieldsValue.serviceId) {
        serviceId = fieldsValue.serviceId.key;
      }
      delete payload.serviceId;
      dispatch({
        type: 'product/updateService',
        payload: {
          pathParams: {
            nodeId: currentNode.data.nodeId,
            serviceId,
          },
          data: payload,
        },
      }).then(({ errorCode }) => {
        if (errorCode === 0) {
          message.success('更新成功');
          this.searchRoutesGroup();
          this.toggleDraw();
          this.serviceForm1.current.resetFields();
        }
      });
    });
  };

  handleDeleteService = () => {
    const { dispatch, location } = this.props;
    const { currentNode } = this.state;
    Modal.confirm({
      title: '删除服务',
      content: '确定要删除此服务吗？',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        return dispatch({
          type: 'product/deleteService',
          payload: {
            pathParams: {
              nodeId: currentNode.data.nodeId,
              serviceId: currentNode.data.serviceId,
            },
          },
        }).then(({ errorCode }) => {
          if (errorCode === 0) {
            message.success('删除成功');
            this.searchRoutesGroup();
            this.toggleDraw();
          }
        });
      },
    });
  };

  toggleDraw = () => {
    this.setState({
      drawVisible: !this.state.drawVisible,
    });
  };

  toggleGroupDraw = () => {
    this.setState({
      drawGroupVisible: false,
    });
  };

  // 新增服务节点模态框
  toggleNode = root => {
    this.setState({
      nodeVisible: !this.state.nodeVisible,
      addRouteGroup: {
        phaseId: root && root.id,
        phaseType: root && root.phaseType,
      },
    });
  };

  // 新增服务环节模态框
  toggleGroup = () => {
    this.setState({
      groupVisible: !this.state.groupVisible,
    });
  };

  toggleService = () => {
    this.setState({
      serviceVisible: !this.state.serviceVisible,
    });
  };

  // 添加服务结点
  handleClick = node => {
    this.setState({
      currentNode: node,
      drawVisible: true,
    });
  };

  //点击服务环节
  handleGroupClick = group => {
    this.setState({
      currentGroup: group,
      drawGroupVisible: true,
    });
  };

  getBorderColor = phaseType => {
    switch (phaseType) {
      case 'MAIN':
        return 'rgba(255,118,135,1)';
      case 'REQUIRED':
        return 'rgba(118,186,255,1)';
      case 'OPTIONAL':
        return 'rgba(140,210,144,1)';
    }
  };
  getBackgroudColor = phaseType => {
    switch (phaseType) {
      case 'MAIN':
        return 'rgba(255,118,135,0.2)';
      case 'REQUIRED':
        return 'rgba(118,186,255,0.2)';
      case 'OPTIONAL':
        return 'rgba(140,210,144,0.2)';
    }
  };

  render() {
    const {
      serviceTypes,
      cargoTypes,
      routes,
      ratings,
      currentProduct,
      location,
      submitting,
      dispatch,
      routeGroup,
      servicePhaseCreateLoading,
      servicePhaseUpdateLoading,
      serviceNodeCreateLoading,
      serviceNodeUpdateLoading,
      serviceCreateLoading,
      serviceUpdateLoading,
    } = this.props;
    const {
      width,
      height,
      drawVisible,
      drawGroupVisible,
      currentNode,
      currentGroup,
      groupVisible,
      nodeVisible,
      serviceVisible,
      columns,
    } = this.state;

    const nodeProps1 = {
      serviceTypes,
      currentNode,
      currentProduct,
      entry: location.query.entry,
    };
    const groupProps1 = {
      currentGroup,
      currentProduct,
      entry: location.query.entry,
    };

    const nodeProps2 = {
      serviceTypes,
      currentNode: { data: {} },
      currentProduct,
      entry: location.query.entry,
    };

    const groupProps = {
      currentGroup: {},
      currentProduct,
      entry: location.query.entry,
    };

    const serviceProps1 = {
      cargoTypes,
      currentNode,
      currentProduct,
      drawVisible,
      serviceTypeCode: currentNode.data.serviceTypeCode,
      ratings,
      dispatch,
    };

    const serviceProps2 = {
      cargoTypes,
      currentNode,
      currentProduct,
      serviceTypeCode: currentNode.data.serviceTypeCode,
      ratings,
      drawVisible,
      dispatch,
    };

    let entry = location.query.entry;
    let editStatus =
      currentProduct.status === SERVICE_STATUS.DRAFT ||
      (!currentProduct.isOnline &&
        currentProduct.status === SERVICE_STATUS.AUDITTED &&
        entry === 'audit');
    let countHeight = 0;
    routeGroup.map(val => {
      if (val.nodeDtoExList.length === 0) {
        countHeight += 1;
      } else {
        countHeight += val.nodeDtoExList.length;
      }
    });
    return (
      <div className={styles.tableList}>
        <div id="nodeCon" className={styles.tableListOperator}>
          {editStatus && (
            <IconButton title="添加服务环节" icon="icon-add" onClick={this.toggleGroup} />
          )}
          <RectSvg
            data={routeGroup}
            width={width}
            height={height * countHeight}
            nodeClick={this.handleClick}
            routeGroupClick={this.handleGroupClick}
            addRouteClick={this.toggleNode}
            nodeBorder={this.getBorderColor}
            nodeFill={this.getBackgroudColor}
            showAddNode={editStatus ? 1 : 0}
          />
          <Card title="图例说明" style={{ width: 150, position: 'absolute', top: 100, right: 0 }}>
            <p style={{ display: 'flex', alignItems: 'center' }}>
              <span
                style={{
                  marginRight: 5,
                  display: 'inline-block',
                  width: 20,
                  height: 12,
                  background: 'rgba(255,118,135,0.2)',
                  borderRadius: '4px',
                  border: '2px solid #FF7687',
                }}
              />
              主服务
            </p>
            <p style={{ display: 'flex', alignItems: 'center' }}>
              <span
                style={{
                  marginRight: 5,
                  display: 'inline-block',
                  width: 20,
                  height: 12,
                  background: 'rgba(118,186,255,0.2)',
                  borderRadius: '4px',
                  border: '2px solid #76BAFF',
                }}
              />
              必选服务
            </p>
            <p style={{ display: 'flex', alignItems: 'center' }}>
              <span
                style={{
                  marginRight: 5,
                  display: 'inline-block',
                  width: 20,
                  height: 12,
                  background: 'rgba(140,210,144,0.2)',
                  borderRadius: '4px',
                  border: '2px solid #A4D28C',
                }}
              />
              可选服务
            </p>
          </Card>
          <Drawer
            title={currentNode.depth === 0 ? '服务节点信息' : '服务信息'}
            width={870}
            onClose={this.toggleDraw}
            visible={drawVisible}
          >
            {currentNode.depth === 0 ? (
              <div>
                <NodeForm ref={this.nodeForm1} {...nodeProps1} />
                <Row type="flex" justify="start">
                  <span className={styles.serviceConfigLabel}>服务配置</span>
                </Row>
                {editStatus && (
                  <IconButton
                    title="添加服务"
                    icon="icon-add"
                    onClick={this.toggleService}
                    style={{ fontSize: 30, marginTop: 20 }}
                  />
                )}
                <Table
                  style={{ marginTop: 15, marginBottom: 60 }}
                  dataSource={currentNode.data.serviceRelations}
                  columns={columns}
                  pagination={false}
                />
                {editStatus && (
                  <div
                    style={{
                      position: 'absolute',
                      left: 0,
                      bottom: 0,
                      width: '100%',
                      borderTop: '1px solid #e9e9e9',
                      padding: '10px 16px',
                      background: '#fff',
                      textAlign: 'center',
                    }}
                  >
                    <Button type="danger" onClick={this.handleDeleteNode}>
                      删除
                    </Button>
                    <Button
                      type="primary"
                      style={{ marginLeft: 24 }}
                      loading={serviceNodeUpdateLoading}
                      onClick={this.handleUpdateNode}
                    >
                      更新
                    </Button>
                  </div>
                )}
              </div>
            ) : (
                <div>
                  <ServiceForm ref={this.serviceForm1} {...serviceProps1} />
                  {editStatus && (
                    <div
                      style={{
                        position: 'absolute',
                        left: 0,
                        bottom: 0,
                        width: '100%',
                        borderTop: '1px solid #e9e9e9',
                        padding: '10px 16px',
                        background: '#fff',
                        textAlign: 'center',
                      }}
                    >
                      <Button type="danger" onClick={this.handleDeleteService}>
                        删除
                    </Button>
                      <Button
                        type="primary"
                        style={{ marginLeft: 24 }}
                        loading={serviceUpdateLoading}
                        onClick={this.handleUpdateService}
                      >
                        更新
                    </Button>
                    </div>
                  )}
                </div>
              )}
          </Drawer>
          <Drawer
            title="服务环节信息"
            width={870}
            onClose={this.toggleGroupDraw}
            visible={drawGroupVisible}
          >
            <div>
              <GroupForm ref={this.groupForm} {...groupProps1} />
              {editStatus && (
                <div
                  style={{
                    position: 'absolute',
                    left: 0,
                    bottom: 0,
                    width: '100%',
                    borderTop: '1px solid #e9e9e9',
                    padding: '10px 16px',
                    background: '#fff',
                    textAlign: 'center',
                  }}
                >
                  <Button type="danger" onClick={this.handleDeleteGroup}>
                    删除
                  </Button>
                  <Button
                    type="primary"
                    style={{ marginLeft: 24 }}
                    loading={servicePhaseUpdateLoading}
                    onClick={this.handleUpdateGroup}
                  >
                    更新
                  </Button>
                </div>
              )}
            </div>
          </Drawer>
          <Modal
            maskClosable={false}
            keyboard={false}
            destroyOnClose
            title="添加服务环节"
            visible={groupVisible}
            onOk={this.handleAddGroup}
            onCancel={this.toggleGroup}
            confirmLoading={servicePhaseCreateLoading}
          >
            <GroupForm ref={this.groupForm} {...groupProps} />
          </Modal>
          <Modal
            maskClosable={false}
            keyboard={false}
            destroyOnClose
            title="添加服务节点"
            visible={nodeVisible}
            onOk={this.handleAddNode}
            onCancel={this.toggleNode}
            confirmLoading={serviceNodeCreateLoading}
          >
            <NodeForm ref={this.nodeForm2} {...nodeProps2} />
          </Modal>
          <Modal
            maskClosable={false}
            keyboard={false}
            destroyOnClose
            title="添加服务"
            visible={serviceVisible}
            onOk={this.handleAddService}
            onCancel={this.toggleService}
            confirmLoading={serviceCreateLoading}
          >
            <ServiceForm ref={this.serviceForm2} {...serviceProps2} />
          </Modal>
        </div>
      </div>
    );
  }
}

export default ServiceView;
